<template>
  <div class="info-mainBody">
      <h3 class="info-title">{{info.title}}</h3>

      <p class="info-p">
        <span class="info-time">发表时间:{{info.add_time | dataFormat}}</span>
        <span class="info-click">点击次数:{{info.click}}次</span>
      </p>

      <hr>

      <div class="thumbs">
        <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="item.src">
       </div>
      <div class="content" v-html="info.content"></div>
   
      <conent-box :id="$route.params.id"></conent-box>
  </div>
</template>
<script>
import coments from "../subcomponent/coment.vue";
export default {
  data(){
    return {
      id:this.$route.params.id,
      info:[],
      list:[]
    }
  },
  created(){
    this.getimginfo(),
    this.getthumimage()
  },
  methods: {
    getimginfo(){
      this.$http.get("api/getimageInfo/"+this.id).then(result=>{
        if(result.body.status===0){
          this.info=result.body.message[0];
        }
      })
  },
  getthumimage(){
    this.$http.get('api/getthumimages/'+this.id).then(result=>{
      if(result.body.status===0){
            result.body.message.forEach(item=>{
                item.w=600;
                item.h=400;
          })
        this.list=result.body.message
      }
    })
  }
},
  components:{
    "conent-box":coments
  }
}
</script>
<style>
.info-mainBody{
  margin: 15px 5px;
}
.info-mainBody .info-title{
  color: #26A2FF;
  font-size: 18px;
}
.info-mainBody .info-p{
  display: flex;
  justify-content: space-between;
}
.info-mainBody .content{
  font-size: 14px;
  line-height: 30px;
}
.info-mainBody .thumbs img{
   margin: 10px;
   box-shadow: 0 0 10px red
}
</style>

